<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>身份证图展示</title>
    <link rel="icon" href="{{ url_for('static', filename='ico/favicon_curl.png') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/idcard_s_pic.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/alert_msg.css') }}">
    <script type="module" src="{{ url_for('static', filename='js/idcard_s_show.js') }}"></script>
</head>
<body>

<!-- 标题 -->
<header class="header">
    <h2 class="title">可用于扫码识别的身份证图</h2>
    <button id="backButton" onclick="history.back()">返回</button>
</header>


<!-- 容器 -->
<div class="container">
    <!-- 使用 Jinja2 循环遍历图片列表 -->
    {% for row in images|batch(3, ' ') %}
    <div class="row">
        {% for image in row if image != ' ' %}
        <div class="image-cell">
            <img src="{{ url_for('static', filename='idcard_pics/' + image) }}" alt="{{ image }}" class="clickable-image"
                 data-src="{{ url_for('static', filename='idcard_pics/' + image) }}">
        </div>
        {% endfor %}
    </div>
    {% endfor %}
</div>

<!-- 模态框 (隐藏) -->
<div id="modal" class="modal">
    <span class="close-modal">&times;</span>
    <img class="modal-content" id="expandedImg">
</div>

<!-- 自定义通知, 右上角的通知区 -->
<div id="custom-alert" class="custom-alert"></div>

</body>
</html>